<template>
  <div class="mheader">

    <div class="start">

      <img style="width: 30px" src="../assets/jihe.png"/>
      <img style="width: 100px" src="../assets/logo.png"/>

    </div>

    <div class="center">
      <el-input
          placeholder="请输入内容"
          v-model="input3"
          class="input-with-select"
      >

        <template #append>
          <el-button icon="el-icon-search"></el-button>
        </template>
      </el-input>

    </div>

    <div class="end">
      <img style="width: 30px" src="../assets/提示.png"/>
      <img style="width: 30px" src="../assets/jiher.png"/>
      <img @click="toEdit" style="width: 30px" src="../assets/添加.png"/>
      <img style="width: 30px" src="../assets/photo.png"/>
    </div>


  </div>
</template>


<script lang="ts">
import {defineComponent, ref} from "vue";
import { useRouter } from 'vue-router'

export default defineComponent(
    {
      name: "BHeader",
      setup() {
        const router = useRouter()

        const headerList = ref(
            [
              // '首页',
              // '写文章',
              // '视频',
              // '书籍',
              // '技术前沿'
            ]
        )

        const  toEdit=()=>{
          alert("hello")
          router.push("/Edit")

        }


        return {
          headerList,
          toEdit


        }

      }


    }
)
</script>

<style lang="scss" scoped>
.mheader {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 40px;
  width: 100%;


  .mheaderItem {
    margin-top: 10px;
    color: white;

  }

  .start {
    display: flex;
    align-items: center;
    margin-left: 20px;


  }

  .center {

    width: 500px;

  }

  .end {
    flex-direction: row;
    margin-right: 20px;
    cursor: pointer;
    img{

      margin-left: 10px;
    }

  }

  .el-select .el-input {
    width: 180px;
  }
  .input-with-select .el-input-group__prepend {

    background-color: #fff;
  }


}


</style>